<template>
  <div class="container" ref="container">
    <!-- <div class="title">
      <router-link to="/people"><img src="http://file.rzkeji.com/web/recruit/icon/leftArrow.png" class="leftArrow"/></router-link>
      <div class="title-text">招聘信息填写</div>
    </div> -->
    <top-nav :toLastPath="true">招聘信息填写</top-nav> 
    <ul class="lists">
      <li style="margin-top:10px;">
        <span>附加图片</span>
        <span class="imgList" v-for="(value,index) in logoImg" :key="index">
          <img  class="addImg"  @click='showImg(value.src)' v-lazy="value.src" :key="value.src"/>
          <div class="imgDel" @click="delImg(index)"></div>
        </span>
        <van-uploader :after-read="onRead" >
          <!-- <img :src="value.src" class="addImg"  v-for="(value,index) in logoImg" :key="index" /> -->
          <img src="http://file.rzkeji.com/web/recruit/icon/addImg.png" class="addImg" :class="{hide:flag}"/>
        </van-uploader>
      </li>
      <li style="margin-top:10px;">
        <!-- <picker mode="selector"  :range="workType" @change="workTypeSelect"> -->
          <div class="picker" @click="workTypeSelect">
            <span>职位类型</span>
            <input type="text" name="name" placeholder="选择工期类型" v-model="workTypeInput" readonly>
            <span>></span>
          </div>
          <popup-picker :col="workType" ref="classifyType" @getSelectValue="getWorkTypeValue"></popup-picker>
        <!-- </picker> -->
      </li>
      <li>
        <!-- <picker mode="multiSelector" @change="positionSelect" @columnchange="positionSelect" :value="classifyIndex" :range="classifyOneData"> -->
        <div class="picker" @click="positionSelect">
          <span>职位</span>
          <input type="text" name="name" placeholder="选择职位" v-model="positionInput" readonly>
          <span>></span>
        </div>
        <!-- <popup-picker ref="classify" :col="classifyData" columns_type='mulColumns' @getSelectValue="getPositionValue"></popup-picker> -->
        <popup-picker ref="classify" :col='classifyData' @getSelectValue="getPositionValue"></popup-picker>
        <!-- </picker> -->
      </li>
       <!-- <li style="margin-top:10px;" v-if="workTypeInput=='长期工'"> -->
      <li v-if="this.workTypeInput=='长期工'">
          <div class="picker" @click="sexSelect">
            <span>性别</span>
            <input type="text" name="name" placeholder="选择性别" v-model="sexInput" readonly>
            <span>></span>
          </div>
          <popup-picker :col="sex" ref="sex" @getSelectValue="getSexValue"></popup-picker>

      </li>
      <li>
        <span>招聘人数</span>
        <input type="number" name="name" placeholder="请填写招聘人数" v-model="number">
      </li>
      <li>
          <div class="picker" @click="moneySelect">
            <span>薪资类型</span>
            <input type="text" name="name" placeholder="选择薪资类型" v-model="moneyTypeInput" readonly>
            <span>></span>
          </div>
        <popup-picker :col="moneyType" ref="moneyType" @getSelectValue="getMoneyValue"></popup-picker>
      </li>
      <li style="line-height:26px;">
        <span>薪资金额</span>
        <input type="text" name="name" placeholder="请填写薪资金额" v-model="money" >元
      </li>
      <!-- <li style="line-height:26px;">
          <div class="picker" @click="deadlineSelect">
            <span style="width:130px;">招聘有效时间</span>
            <input type="text" name="name" placeholder="选择招聘有效时间" style="width:143px;" v-model="deadlineInput" readonly>天
            <span style="margin-left:40px;">></span>
          </div>
          <popup-picker :col="deadline" ref="deadline" @getSelectValue="getDeadlineValue"></popup-picker>
      </li> -->
      <li v-if="this.workTypeInput=='长期工'">
        <span>岗位要求</span>
        <input type="text" name="name" placeholder="请填写岗位要求" v-model="workDetails">
      </li>
      <li>
        <span>联系人</span>
        <input type="text" name='name' placeholder="请填写联系人" v-model="contact_name">
      </li>
      <li>
        <span>电话</span>
        <input type="tel" name="name" placeholder="请填写联系方式" v-model="tel">
      </li>
      <li>
        <!-- <picker mode="region"  :value="workRegion" @change="workAddress"> -->
          <div class="picker" @click="workAddress">
            <span>工作地区</span>
            <input type="text" name="name" placeholder="选择公司地址" v-model="workAddressInput" readonly>
            <span>></span>
          </div>
        <!-- </picker> -->
        <popup-picker ref="area" :col="areaList" columns_type='area' @getSelectValue="getWorkAddressValue"></popup-picker>
      </li>
      <li>
        <!-- <picker mode="selector"  :range="workType" @change="workTypeSelect"> -->
          <div class="picker" @click="townSelect">
            <span>街道</span>
            <input type="text" name="name" placeholder="选择镇或街道" v-model="townInput" readonly>
            <span>></span>
          </div>
          <popup-picker :col="town" ref="town" @getSelectValue="getTownValue"></popup-picker>
        <!-- </picker> -->
      </li>
      <li style="margin-bottom: 20px">
        <span>详细地址</span>
        <input type="text" name="name" placeholder="请填写单位详细地址" v-model="addressDetails">
      </li>
    </ul>
    <div class="commit" @click="commit">
        <div>保存</div>
    </div>
  </div>
</template>

<script>
import topNav from '@/components/topNav'
import { Toast } from 'vant';
// import areaList from '@/assets/area.js'
import popupPicker from '@/components/popupPicker'
import { ImagePreview } from 'vant';
import {mixin1, showModal} from '../../../utils/index.js'
export default {
  mixins:[mixin1],
  data () {
    return {
      contact_name:'',
      town:[],
      townInput:"",
      sex:['男','女','男女不限'],
      education:['小学','初中','高中','本科','研究生','硕士','博士'],
      workRegion: ['广东省', '广州市', '海珠区'],   //工作地址选项
      moneyType:['薪资面议','时薪','日薪','计件','月薪'],   //薪资类型
      deadline:[1,2,3], //招聘期限
      // age:[1,2,3], //年龄
      position:[],   //职位
      positionArr:[],     //职位对应的id数组
      positionId:"",    //选择职位的id
      workType:['长期工','临时工'],   //职位类型
      workAddressInput:"",   //工作地址显示
      moneyTypeInput:"",//薪资类型显示
      money:"",     //薪资数量
      addressDetails:"",   //详细地址
      tel:"",    //电话号码
      workDetails:"",   //职位详情信息
      positionInput:"", //职位显示
      workTypeInput:"", //职位类型显示
      deadlineInput:"",  //招聘期限显示
      // ageInput:"", //年龄显示
      sexInput:"", //性别显示
      // logoImg:[{src:'http://file.rzkeji.com/web/recruit/icon/addImg.png',id:""}],//附加图片
      logoImg:[],
      imgArr:[],  //附加图片的id数组
      workTypeId:"",   //职位类型,0:全职，1:兼职，2:实习
      number:"",     //招聘人数
      start_time:"",//招聘开始时间
      end_time:"",//招聘结束时间

      classifyTwoData:[],
      classifyTwoArr:[],
      classifyTwoId:"",
      classifyIndex: [0, 0],
      classifyOneData:[],
      classifyOneArr:[],
      classifyOneId:"",
      id:"",
      classifyDataAll:{},//职位的总类型
      classifyData:[],//长期或临时工数据
      classifyDataIdAll:{},
      areaList:{},
      flag:false
    }
  },

  components: {
    popupPicker,
    topNav
  },

  methods: {
    workAddress(){   //获取选择工作的地址
    this.$refs.area.$data.showArea=true
    },
    async getWorkAddressValue(e){

      let address=e[0].name+e[1].name+e[2].name
        if(this.workAddressInput!=address){//地址切换后，清除镇的显示
          this.townInput=''
        }
        this.workRegion[0]=e[0].name
        this.workRegion[1]=e[1].name
        this.workRegion[2]=e[2].name
        let county=e[2].name
        this.workAddressInput=address;
        let townList=this.$store.state.modulesTowns.townList;
        townList.forEach(val=>{//选中区或街道后，再进行镇的筛选
          for(let p in val){
            if(e[2].name==p){
              this.town=val[p]
            }
            
          }
        })

    },
    moneySelect(){ //获取薪资
      this.$refs.moneyType.$data.showArea=true;
    },
    getMoneyValue(e){
      this.moneyTypeInput=e
    },
    deadlineSelect(){ //获取招聘期限
      this.$refs.deadline.$data.showArea=true
    },
    getDeadlineValue(e){
      this.deadlineInput=e
    },
    // ageSelect(e){ //获取年龄
    //   this.ageInput=this.age[e.target.value]
    // },
    sexSelect(){ //获取性别
      this.$refs.sex.$data.showArea=true;
    },
    getSexValue(e){
      this.sexInput=e
    },
    workTypeSelect(e){ //获取职位类型

      this.$refs.classifyType.$data.showArea=true;
    },
    getWorkTypeValue(e){
      this.workTypeInput=e
      this.positionInput='';
      switch(e){
        // 0:全职，1:兼职，2:实习
        case '长期工' :this.workTypeId=0;break;
        case '临时工' :this.workTypeId=1;break;
      }
    },
    townSelect(){
      this.$refs.town.$data.showArea=true;
    },
    getTownValue(e){//获取选择的街道
      this.townInput=e;
    },
    onRead(file) {
      let f=file.content;
      this.logoImg.push({src:'http://file.rzkeji.com/web/recruit/icon/loading.svg'})//上传时显示loading
      this.$axios.post(
        '/file/UploadBase64',
        {base_code:f}
        
      ).then((res)=>{
        // console.log(this.imgArr)
        let obj={}
        obj.src=res.data.data.img_url
        obj.id=res.data.data.id
        this.imgArr.push(obj.id)
        // console.log(this.imgArr)
        return Promise.resolve(obj)
        })
        .then((obj)=>{
          this.logoImg.pop()
          this.$forceUpdate()
          this.logoImg.push(obj)

        })
    },
    showImg(src){
      ImagePreview({
        images: [`${src}`],
        showIndex:false
      });
    },
    async commit(){
      var userToken=window.localStorage.getItem('userToken');
      var myDate = new Date()
      // this.end_time=this.$currency.formatTime(myDate,this.deadlineInput)
      // this.start_time=this.$currency.formatTime(myDate)
      let sexType;
      if(this.sexInput=='男'){
        sexType=1
      }else if(this.sexInput=='女'){
        sexType=2
      }else{
        sexType=0
      }
      if(this.workTypeInput=='长期工'){
        if(this.sexInput==''){
        Toast('性别不能为空')
        return
      }
      }
      if(this.workTypeInput==''){
        Toast('职业类型不能为空')
        return
      }else if(this.contact_name==''){
        Toast('联系人不能为空')
        return
      }else if(this.positionInput==''){
        Toast('职位不能为空')
        return 
      }else if(this.number==''){
        Toast('招聘人数不能为空')
        return
      }else if(this.moneyTypeInput==''){
        Toast('薪资类型不能为空')
        return
      }else if(this.money==''){
        Toast('薪资金额不能为空')
        return
      }else if(this.tel==''){
        Toast('电话号码不能为空')
        return
      }else if(this.workAddressInput==''){
        Toast('工作地区不能为空')
        return
      }
      let res=await this.$axios.post('/position/createPositionInfo',{user_token:userToken,type:this.workTypeId,people_num:this.number,salary_type:this.moneyTypeInput,salary_num:this.money,contact_phone:this.tel,province:this.workRegion[0],city:this.workRegion[1],area:this.workRegion[2],address_detail:this.addressDetails,town:this.townInput,desc:this.workDetails,position_imgs:this.imgArr,job_type_id:this.classifyTwoId,sex:sexType,id:this.id,contact_name:this.contact_name})
      
      if(res.data.level=="success"){
        this.$currency.showToast(`${res.data.message}`,1500)
        setTimeout(()=>{
          this.$router.push('/people')
        },2000)
      }else{
        this.$currency.showToast(`${res.data.message}`,1500,'fail')
      }
    },
    async getPositionList(){
      var userToken=window.localStorage.getItem('userToken');
      let res=await this.$axios('/position/getPositionType',{params:{user_token:userToken}})
      for([index,value] of res.data.data.entries()){
        this.position.push(value.name)
        this.positionArr.push(value.id)
      }
    },
    positionSelect(){  //获取分类
      this.$refs.classify.$data.showArea=true
    },
    getPositionValue(e){
      // for(let p in this.classifyDataIdAll){
      //   if(p==e){
      //     let jobArr=this.classifyDataId[p]
      //     for(let k in jobArr){
      //       if(Object.keys(jobArr[k])[0]==e[1]){
      //         // console.log(Object.values(jobArr[k])[0])
      //         this.classifyTwoId= Object.values(jobArr[k])[0] 
      //         // this.industryInput=e[1]
      //       }
      //     }
      //   }
      // }
      // this.positionInput=e[1]
      let arr= this.classifyDataIdAll[this.workTypeInput]
      for(let p in arr){
        if(Object.keys(arr[p])[0]==e){
          this.classifyTwoId=Object.values(arr[p])[0]
        }
      }
      this.positionInput=e
    },
    async getClassifyData(){//获取期待岗位
       let res=await this.$axios('/position/getIndustryList',"");
       let obj={},obj2={};
      let data=res.data.data;
      for(let p in data){
        let name=data[p].name
        let jobArr=[],jobArr2=[]
        data[p].job.forEach((value)=>{
          let obj2={[value.name]:value.id};
          jobArr.push(value.name)
          jobArr2.push(obj2)
        })
        obj[name]=jobArr //用于传进picker的对象数据
        obj2[name]=jobArr2 //用于选中相应的picker时，匹配相应的id
      }
      this.classifyDataAll=obj;
      this.classifyDataIdAll=obj2;

    },

    async getData(value){
      let res=await this.$axios('/position/getPositionDetail',{params:{id:value}})
      let data=res.data.data
      this.workTypeInput=data.type
      this.sexInput=this.$currency.sexTag1(data.sex)
      this.positionInput=data.job_type
      this.number=data.people_num
      this.moneyTypeInput=data.salary_type
      this.money=data.salary_num
      // this.deadlineInput=this.$currency.reverseData(data.end_time)-this.$currency.reverseData(data.start_time)
      this.workDetails=data.desc
      this.tel=data.contact_phone
      this.workAddressInput=data.province+" "+data.city+" "+data.area
      this.addressDetails=data.address_detail
      this.classifyTwoId=data.job_type_id
      this.contact_name=data.contact_name
      this.townInput=data.town
      let resTown=await this.$axios('/other/get-address',{params:{name:data.area}})
        if(resTown.data.level=='success'){
          this.town=resTown.data.data
        }
      if(data.position_img.length!=0){//判断返回的图片长度
        let img=data.position_img
        img.forEach(value=>{
          let obj={}
          obj.src=value.img_url
          this.imgArr.push(value.img_id)
          this.logoImg.push(obj)
        })
      }
      
      

    },
    delImg(index){//点击小圆圈删除图片
      
      this.logoImg.splice(index,1)
      
      this.imgArr.splice(index,1)
    }
  },
  mounted(){
    this.getClassifyData()
    this.getPositionList();
    this.getAddress()
  },
  watch:{
    logoImg(n){
      this.flag=n.length>=3?true:false
    },
    workTypeInput(n,o){
      switch(n){
        // 0:全职，1:兼职，2:实习
        case '长期工' :this.classifyData=this.classifyDataAll['长期工'];break;
        case '临时工' :this.classifyData=this.classifyDataAll['临时工'];break;
      }
    }
    // logoImg(v){
    //   console.log(v)
    // },
    // imgArr(v){
    //   console.log(v)
    // }
  },
  activated(){
    document.documentElement.scrollTop=0;
    //初始化数据，不然在点击编辑以后再点击招人，会遗留下上次编辑的数据
    this.imgArr=[]
    this.workTypeInput=""
      this.sexInput=""
      this.positionInput=""
      this.number=""
      this.moneyTypeInput=""
      this.money=""
      this.deadlineInput=""
      this.workDetails=""
      this.tel=""
      this.workAddressInput=""
      this.addressDetails=""
      this.classifyTwoId=""
      this.contact_name=''
      // this.logoImg=[{src:'http://file.rzkeji.com/web/recruit/icon/addImg.png',id:""}]
      this.logoImg=[]
      this.town=[]
      this.townInput=''
      if(this.$route.query.id){
        this.id=this.$route.query.id ?this.$route.query.id : ""
      }
    if(this.$route.query.id){
      this.getData(this.$route.query.id)
    }
  }

}
</script>

<style scoped>
.container{background-color: #F8F8FB;padding-bottom: 55px;}
.title{width: 100%;height: 51px;line-height: 51px;text-align: center;font-size: 22px;color: #000000; background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);;margin-bottom: 5px;display:flex;color:#fff;position: fixed;top:0;z-index: 999}
.container ul{width: 100%;margin-top:45px;}
.container ul li{width: 100%;display: flex;justify-content: row;padding: 20px 0px;margin-bottom: 2px;background-color: #fff;}
.container ul li span:nth-of-type(1){width: 100px;font-size: 17px;color: #000000;padding-left: 25px;}
.container ul li input{width: 223px;border: 0px;font-size: 15px;color: #B2B2B9;}
.container ul li span:nth-of-type(2){margin-right: 10px;font-size: 20px;color:#B2B2B9;}
.commit{position: fixed;bottom: 0px; left: 0px;width: 100%;height: 73px;background-color: #F8F8FB;z-index: 99}
.commit div{width: 345px;height: 48px;text-align: center;line-height: 48px;background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);border-radius: 8px;margin: 12.5px auto;color: #FFFFFF;}
picker,.picker{width: 100%;height: 100%;display: flex;justify-content: row;}
.addImg{width: 73px;height: 73px;margin-right: 7px;}
.leftArrow{width: 20px;height: 20px;margin-top: 12.5px;margin-left: 10px;}
.title-text{flex:1;text-indent: -30px;}
.hide{
  display: none;
}
.imgList{position: relative;}
.imgDel{background:url('~@/assets/del.png') no-repeat;height: 20px;width: 20px;display: inline-block;background-size: 100%;position: absolute;right:0;top:-10px;background-color:#fff;border-radius: 50%}
.lists{
  /* position: absolute; */
  /* height: 600px; */
  /* overflow: scroll */
}
.loading{
  width:73px;
  height: 73px;
  background:gray;
  position: relative;
}
</style>
